<template>
  <div class="shopopen">
    <div class="head"
         @click="dianji()">
      <div class="head-icon">
        <van-icon name="arrow-left"
                  color="#ffffff"
                  size="18" />
      </div>
      <div class="head-text">营业状态</div>
    </div>
    <div class="box">
      <div class="brand">
        <div class="brand-text">{{state.text_1}}</div>
      </div>
      <div class="box-text">{{state.text_2}}</div>
      <button class="box-button"
              @click="dian()">{{state.button}}</button>
      <div class="button-text">{{state.text_3}}</div>
    </div>
    <div class="time">外卖营业时段：{{state.time}}</div>
  </div>

</template>
<script>
import { Dialog } from 'vant';
export default {
  name: 'ShopOpen',
  data () {
    return {
      state: {
        unm: 3,
        text_1: "休息中",
        text_2: "当前店铺已停止提供服务，不接受任何订单，手动恢复营业后可正常接收新订单",
        text_3: "当您希望接收新订单时，请点击上方按钮恢复营业",
        time: "11:00-14:00, 17:00-20:00",
        button: "恢复营业",
        title: '商家恢复营业',
        message: '[默林如斯的肠粉店] 恢复营业，谢谢',
      }
    }
  }
  ,
  methods: {
    dianji () {
      this.$router.push('/tar')
    },
    dian () {
 
      let a = this.state.title
      let b = this.state.message
      Dialog.alert({
        title:a,
        message:b,
      }).then(() => {
        this.$router.push('/tar')
      })

    }
  }

}

</script>
<style scoped>
.head {
  width: 100%;
  height: 90px;
  background-color: #ff6e53;
  position: relative;
}
*{
  font-size: 15px;
}
.head-text {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 20px;
  color: #ffffff;
  font-size: 18px;
}
.head-icon{
  position: absolute;
  bottom: 20px;
}
.brand{
  background-image:url(https://cdn3.axureshop.com/demo/1525603/images/%E8%90%A5%E4%B8%9A%E7%8A%B6%E6%80%81_%E8%90%A5%E4%B8%9A%E4%B8%AD/u1191.png) ;
  width: 150px;
  height: 136px;
  position: relative;
  background-size: cover;

}
.brand-text{
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 25px;
  font-size: 18px;
  color: #ff6e53;
}
.box-text{
  width: 315px;
  text-align: center;
}
.box-button{
width: 315px;
height: 45px;
background-color: #ff6e53;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 30px;

}
.button-text{
  width: 315px;
  text-align: center;
  color: #797979;
  font-size: 13px;
}
.box{
  width: 100%;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
 background-color: #ffffff;
}
.shopopen{
  width: 100vw;
  height: 100vh;
  position: relative;
}
.time{
  width: 100%;
  color: #ff6e53;
  font-size: 14px;
  text-align: center;
  position: absolute;
  bottom: 30px;
}
</style>